<!-- 实验结论自定义指标 -->
<template>
  <div class='zhibiaoBox'>
    <el-row >
      <div class="plusCols">
        <div class="iconBox" style="font-size: 30px; color: #409EFF;"  v-if="state !== '3' && state !== '4'">
          <el-input v-model="expNameIpt" style="margin-right: 20px;width: 400px;" placeholder="请输入要新建的实验名称" clearable></el-input>
          <el-button type="primary" @click="addExp(expNameIpt)">添加实验</el-button>
        </div>
        <div>
          <el-button type="success" @click="lookResult">预览实验结果</el-button>
          <el-button type="success" @click="exportExcel">导出各实验项数据</el-button>
        </div>
      </div>
    </el-row>
    <!-- 主体 -->
    <el-tabs v-model="tabValue" type="card">
      <el-tab-pane
        v-for="item in details"
        :key="item.name"
        :name="item.name"
        :label="item.title"
      >
        <main class="borderBox">
          <el-row class="exp expTitle">
            <el-col>实验指标</el-col>
            <!-- <el-col v-for="(item,index) in content[0].valueArr" :key="index">{{`第${index+1}阶段`}}</el-col> -->
            <el-col v-for="(stageItem,index) in item.content[0].valueArr" :key="index">{{`第${index+1}阶段`}}</el-col>
          </el-row>
          <el-row class="exp zhibiao" v-for="(detailItem,index) in item.content" :key="index">
            <el-col v-show="typeof(detailItem.valueArr) === 'object'">
              <div class="ptb10">
                {{`指标${index+1}`}}
                <el-select v-model="detailItem.optionValue" placeholder="请选择">
                  <el-option
                    v-for="optionItem in options"
                    :key="optionItem.value"
                    :label="optionItem.label"
                    :value="optionItem.value"
                  ></el-option>
                </el-select>
              </div>
              <el-input class="titleInput" v-model="detailItem.prop" clearable></el-input>
            </el-col>
            <el-col v-show="typeof(detailItem.valueArr) === 'object'" v-for="(colItem, colIndex) in detailItem.valueArr" :key="colIndex" class="columnStyle">
              <!-- <div class="ptb10">{{`指标${index+1}`}}</div> -->
              <div class="titleZDYIpt"><div>标题：</div><el-input v-model="detailItem.titlesArr[colIndex]" clearable></el-input></div>
              <div class="contentIpt"><div>内容：</div><el-input v-model="detailItem.valueArr[colIndex]" clearable type="number"></el-input></div>
            </el-col>
          </el-row>
        </main>
      </el-tab-pane>
    </el-tabs>
    <el-row class="plusRow"  v-if="state !== '3' && state !== '4'" style="margin-top: 10px;padding-top: 10px;">
      <el-col :span="8">
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="addRowData(tabValue)" style="margin-right:80px">添加行数据</el-button>
        <el-button type="primary" @click="addColsData()">添加列数据</el-button>
      </el-col>
      <el-col :span="4">
        <el-button style="float:right" type="success" @click="saveConclusion">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '../../api/exper.detail.js'

export default {
components: {},
props: ['id', 'fileName', 'state'],
data() {
  return {
    tabValue: '0',
    expNameIpt: '', // 实验标题input
    details: [],
    taskDetail: [/* {
      expId: this.$route.query.id,
      prop: '',
      valueArr: [''],
      optionValue: '',
      sort: 1
    } */],
    options: [{
        value: '1',
        label: '饼状图'
      },{
        value: '2',
        label: '柱状图'
      },{
        value: '3',
        label: '折线图'
      }/* ,{
        value: '4',
        label: '热力图'
      },{
        value: '5',
        label: '无'
      } */]
  };
},
watch: {},
methods: {
  addExp(expNameIpt) {
    if (this.expNameIpt) {
      let detail = { // 新增实验
        name: this.details.length + "", // tab的name,前端需要
        title: expNameIpt, // tab标题，即小实验标题
        content: [ // 小实验内容
          {
            expId: this.$route.query.id,  // 后端数据
            sort: 0, // 后端数据
            prop: '', // 第一列自定义的指标名称
            optionValue: '', // 第一列中的echarts图类型
            valueArr: [''], // 后几列数据，内容，数值
            titlesArr: [''] // 后几列数据，标题，汉字
          }
        ]
      }
      this.details.push(detail)
      this.expNameIpt = ''
      this.tabValue = this.details.length - 1 + ''
    } else {
      this.$message.error('实验名称不能为空')
    }
  },
  // 减号操作
  /* deleteData (index,content) {
    content.splice(index, 1)
  }, */
  // 添加行数据
  addRowData () {  
    let valueArr = []
    let titlesArr = []
    for (let i = 0; i < this.details[this.tabValue].content[0].valueArr.length; i++) {
      valueArr.push('')
    }
    this.details[this.tabValue].content.push({expId: this.id, valueArr: valueArr, titlesArr: titlesArr, prop: '', optionValue: '', sort: this.details[this.tabValue].content.length})
  },
  // 添加列数据
  addColsData() {
    for (let i = 0; i < this.details[this.tabValue].content.length; i++) {
      this.details[this.tabValue].content[i].valueArr = this.details[this.tabValue].content[i].valueArr.length ? this.details[this.tabValue].content[i].valueArr : []
      this.details[this.tabValue].content[i].valueArr.push('')
    }
  },
  // 预览实验结果
  lookResult() {
      this.$router.push(`/scienceExper/views/threatTracing/indicatorResult/resultIndex?id=${this.id}`)
  },
  async exportExcel() {
    let data = await api.exportJlx(this.id, this.fileName)
  },
  async saveConclusion() {
    let details = this.details.map(detailItem =>{
      detailItem.content.map(item =>{
        item.valueArr = item.valueArr.toString()
        item.titlesArr = item.titlesArr.toString()
      })
      return detailItem
    })
    // console.log(details)
    let data = await api.postConclusion(details)
    if(data.code === 10200) {
      this.$message.success("保存成功")
      this.getPage()
      // console.log(this.tabValue)
      this.tabValue = '0'
    } else {
      this.$message.error("保存失败")
    }
  },
  async getPage() {
    let {data}  = await api.getConclusion(this.id)
    this.details = data.length ? data : this.details
    this.details.map(detailItem =>{
      detailItem.name = detailItem.name + ''
      detailItem.content.map(item =>{
        if (item.valueArr && typeof item.valueArr === 'string') {
          item.valueArr = item.valueArr.split(',')
        } else {
          item.valueArr = []
          // console.log(item.valueArr)
        }
        if (item.titlesArr && typeof item.titlesArr === 'string') {
          item.titlesArr = item.titlesArr.split(',')
        } else {
          item.titlesArr = []
        }
      })
      return detailItem
    })
  }
},
mounted() {
  this.id = this.$route.query.id
  this.getPage()
},
created() {},
}
</script>
<style scoped lang="less">
.exp{
  display:flex;
  align-items:center;
  font-weight: bold;
}
.expTitle{
  text-align: center;
  font-size: 22px;
}
.borderBox{
  border: 1px solid #999;
  overflow-x : auto;
}
.plusCols{
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.el-col{
  padding: 20px;
  flex: 1 0 400px;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}
.plusRow{
  .el-col{
    border: none
  }
}
.zhibiao{
  .el-col{
    height: 100px;
  }
}
.el-select{
  float: right;
  /deep/.el-input__inner{
    height: 30px;
    line-height: 30px;
  }
}
.buttonRight{
  float: right;
}
.iconBox{
    display: flex;
  }
.titleZDYIpt{
  width: 60%;
  margin-right: 7%;
}
.contentIpt{
  width: 30%;
  min-width: 100px;
}
.columnStyle{
  display: flex;
}
.buttonBox{
  min-height: 1px;
}
</style>
